<!--
 * @Author: 陈焕杰
 * @Date: 2020-07-02 15:15:10
 * @LastEditTime: 2020-07-06 11:03:28
 * @LastEditors: Please set LastEditors
 * @Description: 待发货模块
 * @FilePath: \JKShopping\jkshopping\src\pages\my\orders\ordersScreen\components\shipped.vue
--> 

<template>
  <div>
    <template v-if="datas.length!=0">
      <van-cell-group v-for="items of datas" :key="items.id">
        <van-swipe-cell>
          <van-cell>
            <template #title>
              <span>订单编号:{{items.out_trade_no}}</span>
            </template>
            <template>
              <span>{{items.final_status === "un_shipped" ? "待发货" : ''}}</span>
            </template>
          </van-cell>
          <template v-if="items.goods.length === 1">
            <van-cell class="orders-middle" v-for="item of items.goods" :key="item.id">
              <router-link :to="{path:'orders/orderDetail',query:{id:items.id}}">
                <div class="detail">
                  <van-image :src="item.goods_thumb" lazy-load>
                    <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                  </van-image>
                  <div class="center">
                    <p class="name">{{item.goods_name}}</p>
                    <p class="num">{{item.attr_info}}</p>
                    <p class="amount">×{{item.goods_number}}</p>
                  </div>
                  <p class="price">{{item.goods_price | rmb}}</p>
                </div>
              </router-link>
              <van-cell>
                <template #title>
                  <span>总计:{{items.goods_amount | rmb}}</span>
                </template>
              </van-cell>
            </van-cell>
          </template>
          <template v-else-if="items.goods.length >= 2">
            <van-cell class="orders-middle">
              <router-link :to="{path:'orders/orderDetail',query:{id:items.id}}">
                <div class="detail">
                  <van-image :src="items.goods[0].goods_thumb" lazy-load>
                    <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                  </van-image>
                  <div class="center">
                    <p class="name">{{items.goods[0].goods_name}}</p>
                    <p class="num">{{items.goods[0].attr_info}}</p>
                    <p class="amount">×{{items.goods[0].goods_number}}</p>
                  </div>
                  <p class="price">{{items.goods[0].goods_price | rmb}}</p>
                </div>
              </router-link>
              <van-cell>
                <template>
                  <p>共{{items.goods.length}}件商品</p>
                </template>
              </van-cell>
              <van-cell>
                <template #title>
                  <span>总计:{{items.goods_amount | rmb}}</span>
                </template>
              </van-cell>
            </van-cell>
          </template>
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              class="delete-button"
              @click="orderDelete(items.id)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </template>
    <template v-else>
      <div class="order-null">暂无订单</div>
    </template>
  </div>
</template>

<script>
import * as api from "@/api/apiList/order/order.js";
export default {
  data() {
    return {
      datas: [] //订单列表
    };
  },
  methods: {
    async API_table() {
      let params = {
        limit: "30",
        status: "1"
      };
      return await api.order_type_table(params);
    },
    orderDelete(id) {
      this.$dialog
        .confirm({
          message: "确认删除订单吗？"
        })
        .then(async () => {
          let data = {
            id: id
          };
          await api.order_romove(this.qs.stringify(data));
          let res = await api.order_romove(this.qs.stringify(data));
          if (res.data.code === 200) {
            await location.reload();
          } else {
            await this.$toast("该订单不可删除");
          }
        })
        .catch(() => {});
    }
  },
  async created() {
    let res = await this.API_table();
    if (res.data.code === 200) {
      this.datas = res.data.data.data;
    }
    console.log(this.datas);
  }
};
</script>

<style>
</style>